<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>实验室预约</title>
<style type="text/css">
table{
width:100%;
border: 1px solid black;
border-collapse: collapse;
margin-top: 100px;
}
td{

font-size:14px;
height: 30px;
border:solid 1px black;
text-align: center;
cursor: pointer;
}
.title{
font-size:16px;
}
.thtitle td{
background-color: #EEEEEE;
color:black;

}
.unOpen{
color:black;
background-color: #CCCCCC;
}
.open{
color:#00CC47;
background-color: white;
}
</style>
<script type="text/javascript">

//初始化table
function initTable(){
	$("#recordes").html("");
	for(var i=1;i<=11;i++){
		var desc = "第一节";
		if(i==2){
			desc = "第二节";
		}else if(i==3){
			desc = "第三节";
		}else if(i==4){
			desc = "第四节";
		}else if(i==5){
			desc = "第五节";
		}else if(i==6){
			desc = "第六节";
		}else if(i==7){
			desc = "第七节";
		}else if(i==8){
			desc = "第八节";
		}else if(i==9){
			desc = "第九节";
		}else if(i==10){
			desc = "第十节";
		}else if(i==11){
			desc = "第十一节";
		}
		var tr = "<tr> <td>"+desc+"</td><td  class=\"unOpen\" id=\"td"+i+"_1\">未开放</td> <td  class=\"unOpen\" id=\"td"+i+"_2\">未开放</td> <td  class=\"unOpen\" id=\"td"+i+"_3\">未开放</td> <td  class=\"unOpen\" id=\"td"+i+"_4\">未开放</td> <td  class=\"unOpen\" id=\"td"+i+"_5\">未开放</td><td  class=\"unOpen\" id=\"td"+i+"_6\">未开放</td><td  class=\"unOpen\" id=\"td"+i+"_7\">未开放</td> </tr>";
		$("#recordes").append(tr);
	}
}

function getMessage(){
	var labId = $("#labInfo").val();
	var weekDesc = $("#weekDesc").val();
	$("#openDate").val($("#weekDesc").val());
	
	//获取实验室包含项目
	$.ajax({
		url:'labAppointApplyController.do?labProjectList&labId='+labId,
		success:function(data){
			data = $.parseJSON(data);
			$('#projectList').html('');
			for(var i =0;i<data.length;i++){
				var project = data[i];
				$('#projectList').append(project.projectName);
				$('#projectList').append("&nbsp;&nbsp;");
			}
		}
	});
	
	 $.ajax({
		datatype:'json',
        cache: true,
        type: "POST",
        url:'labAppointApplyController.do?getLabOpenRecord&labId='+labId+"&weekDesc="+weekDesc,
        async: false,
        error: function(request) {
            alert("Connection error");
        },
        success: function(data) {
         initTable();
       	 data = $.parseJSON(data);
       	 $("#rongliang").html("容量:&nbsp;&nbsp;"+data.lab.holdeCount);
       	 for(var i=0; i<data.result.length; i++){
       		 $("#"+data.result[i].coordinate).removeClass("unOpen");
       		 $("#"+data.result[i].coordinate).attr("class","open");
       		 $("#"+data.result[i].coordinate).attr("onClick","showAppointView('"+data.result[i].id+"')");
       		 $("#"+data.result[i].coordinate).html(data.result[i].appointCount);
         } 
        }
    }); 
}
</script>

<script type="text/javascript">
function showAppointView(openRecordId){
	  var addurl = 'labAppointApplyController.do?showAppointView&openRecordId='+openRecordId;
	  $.dialog({
		  	id:'showAppointView',
			content: 'url:'+addurl,
			lock : true,
			zIndex: 1000, 
			width:590,
			height:480,
			title:'预约 ', 
			opacity : 0.3,
			cache:false,
		    cancelVal: '关闭',
		    cancel: true,
		    ok: function(){
		    	iframe = this.iframe.contentWindow;
		    	var message = iframe.saveForm();
		    	if(message != null && message == 'true') {
		    		window.location.href="labAppointApplyController.do?list";
		    		return true;
		    	}else{
		    		return false;
		    	}
		    },
		});
}



</script>

</head>
<body >
<input type="hidden" id="openDate"/>
<div style="width:100%;text-align: center;font-size:18px;height: 40px;margin-top: 20px;">
<span style="font-size:20px;" id="currentSemesterName">${result.semesterName}</span>(<span id="sbeginDate" style="font-size: 19px;"><fmt:formatDate pattern="yyyy-MM-dd" value="${result.startDate }" /></span> ~<span id="sendDate" style="font-size: 19px;"><fmt:formatDate pattern="yyyy-MM-dd" value="${result.endDate }" /></span> )
</div>
<div style="width:100%;text-align: center;margin-top: 20px;">
  <span class="title">周次:&nbsp;&nbsp;</span>
  <t:CommonSelect url="labAppointApplyController.do?select"   name="weekDesc" textField="desc" idField="duration"></t:CommonSelect>&nbsp;&nbsp;
  <span class="title">实验室:&nbsp;&nbsp;</span>
  <t:CommonSelect  url="labController.do?branch-select" callback="getMessage"  name="labInfo" textField="name" idField="id" value="${labId }"></t:CommonSelect>
  &nbsp;&nbsp;<span class="title" id="rongliang"></span><button style="margin-left: 20px;font-size:17px;" onclick="getMessage()">选择</button>
</div>
<div style="margin-top:10px;width:80%;margin-left: auto;margin-right: auto;">说明：蓝色内容表示 <span style="color:#00CC47">空位/容量</span></div>
<div style="
    margin: auto;
    width: 80%;
">
<div style="
    display: inline;
">可做实验:</div>
<div id="projectList" style="
    display: inline;
"></div>
</div>
<table style="margin-top:10px;width:80%;margin-left: auto;margin-right: auto;border:1px solid #797979">
<tr class="thtitle">
  <td>课节</td>
  <td>星期一</td>
  <td>星期二</td>
  <td>星期三</td>
  <td>星期四</td>
  <td>星期五</td>
  <td>星期六</td>
  <td>星期天</td>
</tr>
<tbody id="recordes">
</tbody>
</table>
 
</body>
</html>